<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>设施权限</title>
    <link rel="stylesheet" href="../../assets/libs/layui/css/layui.css"/>
    <link rel="stylesheet" href="../../assets/module/dtree/dtree.css"/>
    <link rel="stylesheet" href="../../assets/module/dtree/font/dtreefont.css"/>
    <link rel="stylesheet" href="../../assets/module/admin.css?v=313"/>
    <link rel="stylesheet" href="../../assets/css/publicStyle.css"/>
    <!--[if lt IE 9]>
    <script src="../../assets/libs/html5shiv.min.js"></script>
    <script src="../../assets/libs/respond.min.js"></script>
    <![endif]-->
    <style>
        .layui-table thead tr{
            border-bottom: 1px solid #ddd;
            background: none;
        }
        .layui-table tbody tr{
            border-bottom: 1px solid #ddddddad;
        }
        .jvm-card-body .layui-table-header{
            display: none;
        }
        .layui-card-body{
            padding-bottom: 15px;
        }
        .layui-border-box{
            border: none;
        }
        .cpmtablecontent{
            height: 223px;
            box-sizing: border-box;
        }
        .systablecontent{
            height: 106px;
            box-sizing: border-box;
        }
        .jvm-card-body{
            height: 184px;
            box-sizing: border-box;
        }
        .sysFilesContent{
            height: 223px;
            box-sizing: border-box;
        }
        .loadingBox{
            width: 100%;
            height: 100%;
            position: relative;
            text-align: center;
        }
        .loadingBox i{
            font-size: 30px;
            text-align: center;
            position: absolute;
            left: 0;
            right: 0;
            margin: auto;
            top: 0;
            bottom: 0;
            width: 28px;
            height: 27px;
        }
        .layui-table thead tr th{
            font-weight: bold;
        }
    </style>
    <!-- 正文开始 -->
<body>
<div class="layui-fluid ">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">CPU</div>
                <div class="layui-card-body cpmtablecontent" >
                    <div class="loadingBox">
                        <i class="layui-icon layui-anim layui-anim-rotate layui-anim-loop">&#xe63d;</i>
                    </div>
                    <table class="layui-table" lay-skin="nob" id="CPU-table"></table>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">内存</div>
                <div class="layui-card-body cpmtablecontent" >
                    <div class="loadingBox">
                        <i class="layui-icon layui-anim layui-anim-rotate layui-anim-loop">&#xe63d;</i>
                    </div>
                    <table class="layui-table" lay-skin="nob" id="mem-table"></table>
                </div>
            </div>
        </div>
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">服务器信息</div>
                <div class="layui-card-body systablecontent" >
                    <div class="loadingBox">
                        <i class="layui-icon layui-anim layui-anim-rotate layui-anim-loop">&#xe63d;</i>
                    </div>
                    <table class="layui-table" lay-skin="nob" id="sys-table"></table>
                </div>
            </div>
        </div>
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">Java虚拟机信息</div>
                <div class="layui-card-body jvm-card-body" >
                    <div class="loadingBox">
                        <i class="layui-icon layui-anim layui-anim-rotate layui-anim-loop">&#xe63d;</i>
                    </div>
                    <table class="layui-table" lay-skin="nob" id="jvm-table"></table>
                </div>
            </div>
        </div>
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">磁盘状态</div>
                <div class="layui-card-body sysFilesContent" >
                    <div class="loadingBox">
                        <i class="layui-icon layui-anim layui-anim-rotate layui-anim-loop">&#xe63d;</i>
                    </div>
                    <table class="layui-table" lay-skin="nob" id="sysFiles-table"></table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- js部分 -->
<script type="text/javascript" src="../../assets/libs/layui/layui.js"></script>
<script type="text/javascript" src="../../assets/js/common.js?v=313"></script>

<script src="../../assets/libs/template-web.js"></script>
<script src="../../assets/libs/axios.min.js"></script>
<script src="../../assets/js/config.js"></script>
<script src="../../assets/js/authority.js"></script>
<script type="text/javascript">
    <!--自定义函数判断权限-->
    var userInfo = getAuthority();
    var powerlist = JSON.parse(userInfo).permissions;
    /*自定义函数判断权限*/
    template.defaults.imports.hasPower = function(data){
        if(powerlist.includes(data)){
            return true;
        }
        return false;
    };

    layui.use(['layer', 'form', 'table', 'util', 'dtree','laypage'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var admin = layui.admin;
        var table = layui.table;
        var util = layui.util;
        var dtree = layui.dtree;
        var laypage = layui.laypage;
        var Authorization;//请求接口用

        //获取权限方法
        if (userInfo) {
            var access_token = localStorage.getExpire("access_token");
            var token_type = localStorage.getExpire("token_type");
            Authorization = token_type + " " + access_token;
            getSelectReports();
        }

        //获取信息
        function getSelectReports(){
            axios({
                method: 'get',
                url:systemUrl.faciRole.sysInfo,
                headers:{
                    'Authorization':Authorization
                }
            })
                .then(function (response) {
                    if(response.status == 200 &&response.data.message == "success"){
                        var data = response.data.data;
                        $(".loadingBox").css("display","none")
                        renderCPUTable(data.cpu);
                        renderMemTable(data.mem,data.jvm);
                        renderSysTable(data.sys);
                        renderjvmTable(data.jvm,data.sys);
                        renderSysFiles(data.sysFiles);
                    }
                })
                .catch(function (error) {
                    console.log(error);
                    if(error.response.status === 401 || error.response.status === 403 || error.response.status === 406){
                        // 进行重新登陆
                        localStorage.clear();
                        top.location.href=loginPageUrl;
                    }
                });
        }

        function renderCPUTable(data){
            let tableData = [{
                "name": "核心数"
                ,"value": data.cpuNum
            },{
                "name": "用户使用率"
                ,"value": data.used+"%"
            },{
                "name": "系统使用率"
                ,"value": data.sys+"%"
            },{
                "name": "当前空闲率"
                ,"value": data.free+"%"
            }]
            //展示已知数据
            table.render({
                elem: '#CPU-table'
                ,skin: 'nob'
                ,cols: [[ //标题栏
                    {field: 'name', title: '属性',unresize:true}
                    ,{field: 'value', title: '值',unresize:true}
                ]]
                ,data: tableData
            });
        }

        function renderMemTable(mem,jvm) {
            let tableData = [{
                "name": "总内存"
                ,"mem": mem.total+"G"
                ,"jvm":jvm.total+"M"
            },{
                "name": "已用内存"
                ,"mem": mem.used+"G"
                ,"jvm":jvm.used+"M"
            },{
                "name": "剩余内存"
                ,"mem": mem.free+"G"
                ,"jvm":jvm.free+"M"
            },{
                "name": "使用率"
                ,"mem": mem.usage+"%"
                ,"jvm":jvm.usage+"%"
            }]
            //展示已知数据
            table.render({
                elem: '#mem-table'
                ,skin: 'nob'
                ,cols: [[ //标题栏
                    {field: 'name', title: '属性',unresize:true}
                    ,{field: 'mem', title: '内存',unresize:true}
                    ,{field: 'jvm', title: 'JVM',unresize:true}
                ]]
                ,data: tableData
            });
        }

        function renderSysTable(sys) {
            let tableData = [{
                "computerName": sys.computerName
                ,"computerIp": sys.computerIp
                ,"osName":sys.osName
                ,"osArch":sys.osArch
            }]
            //展示已知数据
            table.render({
                elem: '#sys-table'
                ,skin: 'nob'
                ,cols: [[ //标题栏
                    {field: 'computerName', title: '服务器名称',unresize:true}
                    ,{field: 'computerIp', title: '服务器IP',unresize:true}
                    ,{field: 'osName', title: '操作系统',unresize:true}
                    ,{field: 'osArch', title: '系统架构',unresize:true}
                ]]
                ,data: tableData
            });
        }

        function renderjvmTable(jvm,sys){
            let tableData = [{
                "col1": "Java名称"
                ,"col2": jvm.name
                ,"col3":"Java版本"
                ,"col4":jvm.version
            },{
                "col1": "启动时间"
                ,"col2": jvm.startTime
                ,"col3":"运行时长"
                ,"col4":jvm.runTime
            },{
                "col1": "安装路径"
                ,"col2": jvm.home
            },{
                "col1": "项目路径"
                ,"col2": sys.userDir
            }]
            //展示已知数据
            table.render({
                elem: '#jvm-table'
                ,skin: 'nob'
                ,cols: [[ //标题栏
                    {field: 'col1', title: '',width:"15%",unresize:true}
                    ,{field: 'col2', title: '',width:"35%",unresize:true}
                    ,{field: 'col3', title: '',width:"15%",unresize:true}
                    ,{field: 'col4', title: '',width:"35%",unresize:true}
                ]]
                ,data: tableData
            });
        }

        function renderSysFiles(sysFiles) {
            //展示已知数据
            table.render({
                elem: '#sysFiles-table'
                ,skin: 'nob'
                ,cols: [[ //标题栏
                    {field: 'dirName', title: '盘符路径',unresize:true}
                    ,{field: 'sysTypeName', title: '文件系统',unresize:true}
                    ,{field: 'typeName', title: '盘符类型',unresize:true}
                    ,{field: 'total', title: '总大小',unresize:true}
                    ,{field: 'free', title: '可用大小',unresize:true}
                    ,{field: 'used', title: '已用大小',unresize:true}
                    ,{field: 'usage', title: '已用百分比',unresize:true}
                ]]
                ,data: sysFiles
            });
        }
    })
</script>

</body>

</html>